<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			
		<title>数据表格的显示</title>
		<!-- 导入 jquery 核心类库 -->
	<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
	<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
	<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
	
	<script>
		/*$(function(){
			$("#datagrid").datagrid({
				//columns 二维数组用来定义表头的
				columns:[[
					{field:'id',title:'编号',width:100},//定义一列
					{field:'name',title:'名称',width:100},
					{field:'price',title:'价格',width:100}
				
				]],
				
				url: "1.json",
				
				// 页面顶部的按钮
				toolbar:[{
					 iconCls: 'icon-edit',  
					 text:'编辑',
					  handler: function(){alert('edit')}  	
					  }
					,{
					  iconCls: 'icon-help',  
					  text: '帮助',
					  handler: function(){alert('help')}  	

					
				}],
				pagination:true  // 显示分页条
				
				
				
				
			});
			
		});
		*/
		$(function(){
			//设置数据表格
			$("#datagrid").datagrid({
				
				
				
				
				//设置顶部的按钮
				toolbar:[
				{
					iconCls: 'icon-edit',  
					 text:'编辑',
					  handler: function(){alert('edit')}  	
					
				},{
					iconCls: 'icon-help',  
					  text: '帮助',
					  handler: function(){alert('help')}  
					
				},{
					iconCls: 'icon-save',  
					  text: '保存',
					  handler: function(){alert("save")}
					
				}
				
				],
				
				//设置表头
				columns:[[
					{field:'id',title:'编号',width:100},//定义一列
					{field:'name',title:'名称',width:100},
					{field:'price',title:'价格',width:100}
				
				
				]]
				
				//加载数据的路径
				
				
				//分页条的显示
				
				
				
				
			})
			
			
			
		})
		
		
	</script>
	
	
	<body> 
		<!--在需要显示的部位table id-->
		<table id="datagrid"></table>

   </body> 

 


</html>
